<!DOCTYPE html> 
<html lang = "en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>ZoZoのPlayer</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap.min.css">
    <style>
        .myaudio{
           width: 100%;
           height: 40px;
           margin-top: 5px;
           outline: none;
           background-color:#f1f3f4; 
        }
        .row-vertical-center {
            display: flex;
            align-items: center;
        }
    </style>


</head>

<body>
    <!-- "container-fluid" 100% -->
    <div class="container"  id="player">
        <!-- 标题和搜索 -->
        <div class="row " style="background-color: #8E354A ; " > 

                <h1 class="col-md-4 col-sm-8"  >ZoZoのPlayer</h1>
                <p>
                    <div class="play_search col-md-3 col-md-offset-4 input-lg"  >
                        <input  class="form-control"  
                        type="text" autocomplete="off" v-model="query"
                        @keyup.enter="searchMusic">      
                    </div> 
                </p>

        </div>
        <!-- 歌曲列表 glyphicon glyphicon-play -->
        <div class="row">
            <div class="col-md-3" style="height:480px;overflow: auto;" >
            <table class="table table-hover  table-stripe" >
                    <thead>
                        <th>#</th>
                        <th>音乐标题</th>
                        <th>MV</th>
                    </thead>
                    <tr v-for="(item,index) in musicList" @click="playMusic(item.id)">
                        <th href="javascript:;">{{index + 1}}</th>
                        <th>{{item.name}}</th>
                        <th v-if="item.mvid!=0"><span class="glyphicon glyphicon-play" @click="playMV(item.mvid)">MV</span></th>
                    </tr> 
            </table>
            </div>  
            <!-- 封面和mv -->
            <!-- <div class="col-md-3 col-md-offset-2"> -->
                <div class="play_video col-md-4" v-show="isShow"   >
                    <video :src="mvUrl" autoplay controls="controls"></video>
                    <div class="mask" @click="quitMV"> 点这里</div>
                </div>
            <!-- 封面  row-vertical-center-->
            
            <div class="play_center col-md-4 "  >
                <img  v-show="!isShow" class="img-rounded" :src="musicPicUrl" class="music_Cover" width="480px"/>
            </div>
            <!-- 评论 -->
            <div class="col-md-3 col-md-offset-2 ">
                <div class="panel " style="height:480px;overflow: auto;">
                    <div class="panel-heading" style="background-color: #8E354A ; ">
                          <h3 class="panel-title">热门评论</h3>
                    </div>
                    <div class="panel-body">
                      <div class="play_hotComments" >
                          <dl v-for="item in hotComments">
                              <dt><img class="img-circle .img-responsive" style="width: 40px;" :src="item.user.avatarUrl" ></dt>
                              <dt class="name" > {{item.user.nickname}}</dt>
                              <dd class="detail"> {{item.content}}</dd>
                              <h1 class="divider"></h1>
                          </dl>
                      </div>
                    </div>
              </div>
            </div>
            <!-- audio -->
            <div class="play_audio col-md-12" :class="{playing:isPlaying}">
                <audio :src="musicUrl"
                    autoplay
                    controls
                    class="myaudio"
                    @play="play"
                    @pause="pause"
                    class="myaudio"
                    >
                </audio>
            </div>    
        </div>
        <!-- <div class="col-md-3 ">
            <div class="panel ">
                <div class="panel-heading" style="background-color: #8E354A ; ">
                      <h3 class="panel-title">热门评论</h3>
                </div>
                <div class="panel-body">
                  <div class="play_hotComments"  style="height:480px;overflow: auto;">
                      <dl v-for="item in hotComments">
                          <dt><img class="img-circle .img-responsive" style="width: 40px;" :src="item.user.avatarUrl" ></dt>
                          <dt class="name" > {{item.user.nickname}}</dt>
                          <dd class="detail"> {{item.content}}</dd>
                          <h1 class="divider"></h1>
                      </dl>
                  </div>
                </div>
          </div>
        </div> -->
        
        
        

    </div>

    


    <!-- vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- bootstrap插件js -->
    <script src="js/jquery-3.6.0.js"></script>
    <script src="BootStrap/js/bootstrap.min.js"></script>
    <script src="./app.js"></script>
    
</body>

</html>